<template>
  <div class="password-container">
    <el-card class="password-card">
      <template #header>
        <div class="card-header">
          <h2>修改密码</h2>
        </div>
      </template>
      
      <el-form 
        ref="passwordForm" 
        :model="passwordData" 
        :rules="rules" 
        label-width="120px"
        label-position="right"
        status-icon
      >
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input 
            v-model="passwordData.currentPassword" 
            type="password" 
            show-password
            placeholder="请输入当前密码"
          />
        </el-form-item>
        
        <el-form-item label="新密码" prop="newPassword">
          <el-input 
            v-model="passwordData.newPassword" 
            type="password" 
            show-password
            placeholder="请输入新密码"
          />
        </el-form-item>
        
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input 
            v-model="passwordData.confirmPassword" 
            type="password" 
            show-password
            placeholder="请再次输入新密码"
          />
        </el-form-item>
        
        <div class="password-tips">
          <h4>密码要求：</h4>
          <ul>
            <li>长度至少8个字符</li>
            <li>包含至少一个大写字母</li>
            <li>包含至少一个小写字母</li>
            <li>包含至少一个数字</li>
            <li>包含至少一个特殊字符（如 !@#$%^&*）</li>
          </ul>
        </div>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">确认修改</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 表单引用
const passwordForm = ref(null)

// 密码数据
const passwordData = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 验证密码强度
const validatePasswordStrength = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入密码'))
    return
  }
  
  if (value.length < 8) {
    callback(new Error('密码长度至少为8个字符'))
    return
  }
  
  const hasUpperCase = /[A-Z]/.test(value)
  const hasLowerCase = /[a-z]/.test(value)
  const hasNumber = /\d/.test(value)
  const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value)
  
  if (!hasUpperCase) {
    callback(new Error('密码必须包含至少一个大写字母'))
    return
  }
  
  if (!hasLowerCase) {
    callback(new Error('密码必须包含至少一个小写字母'))
    return
  }
  
  if (!hasNumber) {
    callback(new Error('密码必须包含至少一个数字'))
    return
  }
  
  if (!hasSpecial) {
    callback(new Error('密码必须包含至少一个特殊字符'))
    return
  }
  
  callback()
}

// 验证确认密码
const validateConfirmPassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请再次输入密码'))
    return
  }
  
  if (value !== passwordData.newPassword) {
    callback(new Error('两次输入密码不一致'))
    return
  }
  
  callback()
}

// 表单验证规则
const rules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { validator: validatePasswordStrength, trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
}

// 提交表单
const submitForm = async () => {
  if (!passwordForm.value) return
  
  await passwordForm.value.validate(async (valid) => {
    if (valid) {
      try {
        // 这里应该调用API修改密码
        // await changePassword({
        //   oldPassword: passwordData.currentPassword,
        //   newPassword: passwordData.newPassword
        // })
        
        ElMessage.success('密码修改成功')
        resetForm()
      } catch (error) {
        console.error('修改密码失败:', error)
        ElMessage.error('密码修改失败，请检查当前密码是否正确')
      }
    } else {
      return false
    }
  })
}

// 重置表单
const resetForm = () => {
  if (!passwordForm.value) return
  passwordForm.value.resetFields()
}
</script>

<style scoped>
.password-container {
  padding: 20px;
}

.password-card {
  max-width: 600px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.password-tips {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.password-tips h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #606266;
}

.password-tips ul {
  margin: 0;
  padding-left: 20px;
  color: #606266;
}

.password-tips li {
  margin-bottom: 5px;
}
</style>
